<template>
    <div class="item" @click="clickHandle">
        <div class="imgWrap flex_c_c">
          <img v-lazy="data.img_url" alt>
        </div>
        <div class="title ellipsis_l1">{{data.title}}</div>
        <slot name="footer">
            <div class="price">
                <span>&yen; {{data.sell_price}}</span>
                <span> {{ data.buy }} 购买</span>
            </div>
        </slot>

    </div>
</template>

<script>

    export default {
        props:{
            data:{
                // 参数类型校验和必传
                type: Object,
                required: true
            }
        },
        methods:{
            clickHandle(event){
                 // 触发父的自定义事件
                this.$emit('click',this.data,event)
            }

        }
    }
</script>

<style lang="scss" scoped>
     .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 200px;
      width: 47%;
      padding: 6px;
      border-radius: 8px;
      background: #fff;
      margin-bottom: 4px;
      font-size: 14px;
      .imgWrap {
        height: 124px;
        width: 100%;
        img {
          height: 100%;
          width: 100%;
        }
      }

        .title {
            margin: 2px 0;
        }

      .price {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span:nth-child(1) {
          color: #ff845e;
          font-size: 16px;
          font-weight: 700;
        }

        span:nth-child(2) {
          font-size: 12px;
          color: #999;
        }
      }
    }
</style>
